<template>
  <div class="classify" ref="cont">
    <content-header >文章分类</content-header>
    <div class="container">
      <div class="body">
        <div class="search">
          <a-space>
            <span>分类名称：</span>
            <a-input-search placeholder="请输入" enter-button @search="(keyword) => keyword!=''?search(keyword):getList(keyword)" />
          </a-space>
        </div>
        <div class="btn">
          <a-button type="primary" @click="openModal"><a-icon type="plus" />添加分类</a-button>
        </div>
        <div class="list">
          <a-table :pagination="false" :columns="columns" rowKey="id" :data-source="list" :loading="loading" :scroll="{ x: list.length > 0&&screenWidth<=1000?1100:0, y: 0 }" >
            <div slot="pic" slot-scope="record">
              <img :src="record.pic" class="pic" v-if="record.pic != ''" alt="">
              <img :src="noImg" class="pic" v-else alt="">
            </div>
            <div slot="is_show" slot-scope="record">
              <a-switch checked-children="显示" un-checked-children="隐藏" :checked="record.is_show == 1?true:false" @change="(val) => {return record.is_show = val?1:0,switchChange(val,record.id)}" />
            </div>
            <div slot="action" slot-scope="record" class="action acea-row row-middle">
              <a href="javascript:;" class="acea-row row-middle" @click="openModal(record.id)">编辑<p></p></a>
              <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="delClass(record.id)" >
                <a href="javascript:;" class="acea-row row-middle" >删除</a>
              </a-popconfirm>
            </div>
          </a-table>
        </div>
      </div> 
    </div>
    <a-modal class="modal" title="添加商品分类" :visible="show" :width="600" okText="提交" @ok="ok" @cancel="closeModal" >
      <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="父级" prop="pid" required>
          <a-select default-value="lucy" v-model="form.pid" style="width: 360px" @change="">
            <a-select-option :value="0">顶级栏目</a-select-option>
            <template v-for="(item,index) in list">
              <a-select-option :key="index" v-if="form.id != item.id" :value="item.id">{{item.title}}</a-select-option>
            </template>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="栏目名称" prop="title" required>
          <a-input placeholder="请输入栏目名称" v-model="form.title" style="width: 360px" />
        </a-form-model-item>
        <a-form-model-item label="分类图标" >
          <picSelector :value="form.pic" @confirm="(path)=>form.pic = path" ></picSelector>
        </a-form-model-item>
        <a-form-model-item label="排序" >
          <a-input v-model="form.sort" style="width: 80px" />
        </a-form-model-item>
        <a-form-model-item label="状态" >
          <a-switch checked-children="显示" un-checked-children="隐藏" :checked="form.is_show == 1?true:false" @change="(val) => form.is_show = val?1:0" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import request from 'api/request'
import contentHeader from 'components/common/content-header'
import picSelector from 'components/picSelector'
import noImg from 'public/images/noImg.png'

const columns = [
  { title: 'ID', dataIndex: 'id',width:100, key: 'id' },
  { title: '分类名称', dataIndex: 'title',width:100, key: 'title'},
  { title: '分类图表', key: 'pic',width:100, scopedSlots: { customRender: 'pic' }},
  { title: '排序', dataIndex: 'sort',width:100, key: 'sort'},
  { title: '状态', key: 'is_show',width:100, scopedSlots: { customRender: 'is_show' }},
  { title: '操作', key: 'action',width:200 ,scopedSlots: { customRender: 'action' },fixed:'right'},
]

export default {
  components:{
    contentHeader,
    picSelector
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14},
      screenWidth:0,
      noImg,
      columns,
      show:false,
      loading:false,
      list2:[],
      list:[],
      form:{
        title:'',
        pic:'',
        pid:'',
        sort:0,
        is_show:1
      },
      mod:'add'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(keyword=''){
      this.loading = true
      request.get("/article/class/list",{keyword}).then(e=>{
        if(e.status == 200){
          let arr = []
          this.list2 = JSON.parse(JSON.stringify(e.data))
          for(let i of e.data){
            if(i.pid == 0){
              let f = e.data.filter(s=>s.pid == i.id)
              if(f.length > 0){
                i.children = f
              }
              arr.push(i)
            }
          }
          this.list = arr
          this.loading = false
        }
      })
    },
    search(keyword){
      this.loading = true
      request.get("/article/class/list",{keyword}).then(e=>{
        if(e.status == 200){
          this.list = e.data
          this.loading = false
        }
      })
    },
    ok(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          if(this.mod == "add"){
            request.post("/article/class/add",this.form).then(e=>{
              if(e.status == 200){
                this.$message.success("添加成功")
                this.getList()
                this.closeModal()
              }
            })
          }else{
            request.post("/article/class/edit",this.form).then(e=>{
              if(e.status == 200){
                this.$message.success("修改成功")
                this.getList()
                this.closeModal()
              }
            })
          }
        }
      })
    },
    switchChange(val,id){
      let f = this.list2.find(e=>e.id == id)
      f.is_show = val?1:0
      request.post("/article/class/edit",f).then(e=>{
        if(e.status == 200){
          this.$message.success("修改成功")
          this.getList()
          this.closeModal()
        }
      })
    },
    delClass(id){
      request.post("/article/class/del",{id}).then(e=>{
        if(e.status == 200){
          this.$message.success("添加成功")
          this.getList()
        }
      })
    },
    openModal(id){
      if(typeof id == "number"){
        request.get("/article/class/list",{id}).then(e=>{
          if(e.status == 200){
            this.form = e.data[0]
            this.show = true
            this.mod = 'edit'
          }
        })
      }else{
        this.show = true
        this.mod = 'add'
      }
    },
    closeModal(){
      this.show = false
      this.$refs.form.resetFields()
    }
  },
  mounted() {
    const that = this
    let cont = this.$refs.cont
    this.screenWidth = cont.clientWidth
    window.addEventListener("resize",(e)=>{
      that.screenWidth = cont.clientWidth
    })
  },
}
</script>

<style scoped>
  .classify .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .classify .container .body{
    padding: 16px;
  }
  .classify .container .body .btn{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .classify .action p{
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
  .pic{
    width: 36px;
    height: 36px;
  }
</style>